<!-- Created by jack on 2022/4/20 - 11:12 -->
<style scoped lang="less">
.content{
  position: relative;
  display: inline-block;
}
.pop-up-container{
  z-index: v-bind(zIndex);
  position: absolute;
  top: v-bind(top);
  bottom: v-bind(bottom);
  left: 0;
  padding-bottom: v-bind(paddingBottom);
  padding-top:v-bind(paddingTop);
  padding-left: v-bind(paddingLeft);
  padding-right: v-bind(paddingRight);
  &__slot{
    //background: #fff;
  }
}

.fade-enter-from,.fade-leave-to{ opacity: 0;}
.fade-enter-to,.fade-leave-from{ opacity: 1;}
.fade-enter-active,.fade-leave-active{
  transition: all ease-in-out .3s;
}
</style>

<template>
  <div @mouseenter="emit('update:modelValue', true)" @mouseleave="emit('update:modelValue', false)" ref="slot" class="content">
    <slot name="ref"/>
    <!--  浮层  -->
    <transition name="fade">
      <div class="pop-up-container" v-if="modelValue">
        <div class="pop-up-container__slot">
          <slot/>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import {computed, nextTick, onMounted, ref} from "vue";
import {getDomPosition} from "@/helper";
const props = defineProps({
  modelValue: { type: Boolean, default: true},
  offsetX: { type: Number, default: 0 },
  offsetY: { type: Number, default: 0 },
  position:{ type:String, default:"top"},
  zIndex:{ type:Number, default: 0 }
})
const emit = defineEmits(['update:modelValue'])

const slot = ref(null)

const paddingLeft = ref('auto')
const paddingRight = ref('auto')
const paddingTop = ref('auto')
const paddingBottom = ref('auto')
const bottom =ref('auto')
const top = ref('auto')
const zIndex = ref(props.zIndex)

onMounted(() => {
  const { top:slotTop,left:slotLeft,width:slotWidth,height:slotHeight } = getDomPosition(slot.value, true)
  const offsetY = slotTop + props.offsetY + 'px'
  const isToLeft = Number(props.offsetX) < 0
  const offsetX = Math.abs(props.offsetX)
  if(props.position === 'top') {
    bottom.value = '0px'
    paddingBottom.value = offsetY
  }else{
    top.value = '0px'
    paddingTop.value = offsetY
  }
  if(isToLeft){
    paddingRight.value = offsetX + 'px'
  }else {
    paddingLeft.value = offsetX  + 'px'
  }
})
const toggleShow = () => {
  emit('update:modelValue', !props.modelValue)
}
</script>
